<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap"></div>
    <script>
        // 对象
        const obj = { name: '小明', age: 18 }
        const wrap = document.getElementById('wrap')
        wrap.textContent = obj.name
        // 代码开始的地方
        wrap.textContent = obj.name
        obj.name = '123'
        wrap.textContent = obj.name
        obj.name = '456'
        wrap.textContent = obj.name
        obj.name = '789'
        wrap.textContent = obj.name
        // ....

        // Proxy : 对象代理 监控数据属性的变化， new Proxy是一个构造函数 ==> class
        const p = new Proxy(obj, {
            get(target, property, receiver) {//日志的记录信息
                console.log('有人访问了name属性');
                // return obj[property]
                return "哈哈哈，你想访问我里面的属性，你在想屁吃"
            },
            set(target, property, value, receiver) {
                // console.log('有人设置name属性');
                obj[property] = value
                wrap.textContent = obj.name
            }
        })
        p.name = '123'
        p.name = '456'
        p.name = '789'
        p.name = '101112'
        console.log(p.name);
    </script>
</body>

</html>